<template>
    <el-menu class="el-menu-vertical  fl aside-left clearfix" @open="handleOpen" @close="handleClose" :collapse="false">
        <template v-for="(item,index) in nav">
            <!--一级菜单-->
            <template v-if="item.href">
                <router-link :to="item.href">
                    <el-menu-item :index="index+''">
                        <i v-if="item.icon" :class="item.icon"></i>
                        <span slot="title">{{item.show}}</span>
                    </el-menu-item>
                </router-link>
            </template>
            <!--二级菜单-->
            <template v-else>
                <el-submenu :index="index+''">
                    <template slot="title"><i v-if="item.icon" :class="item.icon"></i>{{item.show}}
                    </template>
                    <template v-for="(v,k) in item.child">
                        <template v-if="v.child">
                            <el-menu-item-group>
                                <tempalte v-for="(vv,kk) in v.child" :key="kk">
                                    <router-link :to="vv.href">
                                        <el-menu-item :index="index+''+k+kk">
                                            {{vv.show}}
                                        </el-menu-item>
                                    </router-link>
                                </tempalte>
                            </el-menu-item-group>
                        </template>
                        <template v-else>
                            <router-link :to="v.href">
                                <el-menu-item :index="index+''+k">
                                    {{v.show}}
                                </el-menu-item>
                            </router-link>
                        </template>
                    </template>
                </el-submenu>
            </template>
        </template>
    </el-menu>
</template>

<style scoped>
    .el-menu-vertical:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>

<script>
    export default {
        name: "c-nav",
        data() {
            return {
                nav: [
                    {
                        show: 'demo1',
                        icon: 'el-icon-menu',
                        child: [
                            {
                                href: '/user/default_show',
                                show: 'demo2',
                            },
                        ]
                    },
                ]
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
    }
</script>
